<template>
    <view class="topBg">
        <view class="infoArea flex" @click="toAcountInfo">
            <view class="border border-solid border-#edf1f160 w-84px h-84px rounded-full">
                <image class="w-84px h-84px rounded-full" :src="userInfo.avatar || '/static/R-C.png'"></image>
            </view>
            <view class="flex flex-col text-white justify-center pl-3">
                <view>
                    {{ userInfo.nickname }}
                </view>
                <view class="mt-2 text-gray-200"> {{ userInfo.username ? "@" : "" }}{{ userInfo.username }} </view>
            </view>
        </view>
    </view>
    <view class="iconWrap">
        <view class="mb-3 font-bold text-lg">我的订单</view>
        <view class="flex justify-between pb-5">
            <view @click="toPage(item.url)" class="iconItem" v-for="item in orderIconList">
                <image :src="item.icon"></image>
                <text>{{ item.text }}</text>
            </view>
        </view>
    </view>

    <view class="iconWrap mt-3">
        <view class="mb-3 font-bold text-lg">常用功能</view>
        <view class="flex flex-wrap pb-5">
            <view v-for="item in functionIconList" class="iconItem" @click="toPage(item.url)">
                <image :src="item.icon"></image>
                <text>{{ item.text }}</text>
            </view>
        </view>
    </view>
    <wd-message-box />
</template>

<script setup>
import { useMessage } from "wot-design-uni";
import { getUserInfo } from "../../api/auth";
import { ref } from "vue";
const message = useMessage();

const userInfo = ref({});
const orderIconList = [
    {
        icon: "/static/diazhifu.png",
        text: "待支付",
        url: "/pages/orderList/orderList?status=0",
    },
    {
        icon: "/static/daishouhuo.png",
        text: "待收货",
        url: "/pages/orderList/orderList?status=2",
    },
    {
        icon: "/static/yiwancheng.png",
        text: "已完成",
        url: "/pages/orderList/orderList?status=3",
    },
    {
        icon: "/static/dingdan.png",
        text: "全部订单",
        url: "/pages/orderList/orderList",
    },
];

const functionIconList = [
    {
        icon: "/static/dizhi.png",
        text: "地址管理",
        url: "/pages/addressList/addressList",
    },
    {
        icon: "/static/liulanjilu.png",
        text: "浏览记录",
    },
    {
        icon: "/static/guanyuwmen.png",
        text: "关于我们",
    },
    {
        icon: "/static/bangzhu.png",
        text: "帮助",
    },
    {
        icon: "/static/wdqianbao.png",
        text: "我的钱包",
        url: "/pages/wallet/wallet",
    },
    {
        icon: "/static/gouwuka.png",
        text: "购物卡",
        url: "/pages/shoppingCard/shoppingCard",
    },
    {
        icon: "/static/youhuijiuan.png",
        text: "优惠券",
        url: "/pages/coupon/coupon",
    },
];
const fetchUserInfo = () => {
    getUserInfo().then(res => {
        userInfo.value = res.data;
    });
};
fetchUserInfo();
const toAcountInfo = () => {
    uni.navigateTo({
        url: "/pages/accountlnfo/accountlnfo",
    });
};
const toPage = url => {
    if (!url) return;
    uni.navigateTo({
        url: url,
    });
};
</script>

<style>
.topBg {
    width: 100vw;
    height: 248px;
    background-image: linear-gradient(to right, #1989fa, #39a9ed);
    padding-top: 110px;
    box-sizing: border-box;
}

.infoArea {
    padding-left: 20px;
}

.userBtn {
    width: 48.5%;
    background-color: transparent !important;
    border: 1px solid #edf1f160 !important;
}

.iconWrap {
    background-color: #fff;
    border-radius: 12px;
    width: calc(100vw - 24px);
    margin-left: 12px;
    padding-top: 26px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    transform: translateY(-27px);
}

.iconItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
    margin-bottom: 15px;
}

.iconItem > image {
    width: 40px;
    height: 40px;
    display: block;
    margin-bottom: 6px;
}

.iconItem > text {
    color: #646566;
    font-size: 14px;
}
</style>
